{% extends '../layout.html'%}

{% block content %}
<body>
<header class="main-header flex-wrap">
    <a href="" class="back-btn left">
        <img src="img/back_icon.png" width="10" height="17" alt="">
    </a>
    <div class="flex-1">商品分类</div>
    <!--<a href="" class=" right">-->
        <!--<img src="img/buy_car.png" width="21" height="20" alt="">-->
    <!--</a>-->
</header>
<div class="cate-wrap clearfix">
    <div class="cate-tabs pa" id="cate-tabs">
        <ul class="cate-tab-list">
            {% for cate in cates %}
            {% if loop.first %}
            <li class="tab-item curr" id="{{cate.Id}}">{{cate.Name}}</li>
            {% else %}
            <li class="tab-item" id="{{cate.Id}}">{{cate.Name}}</li>
            {% endif %}
            {% endfor%}

        </ul>
    </div>
    <div class="cate-content pa" id="cate-contents">
        <div>
            <ul class="cate-con-list" page="1">
                {% if firstCate.length > 0%}
                {% for con in firstCate%}
                <li>
                    <div class="pr flex-wrap link-wrap">
                        <!--<img src="img/list_item_icon.png" class="icon pa" width="30" height="20" alt="">-->
                        <img src="{{uri}}{{con.IndexPicture}}" class="show-img" width="75" height="75" alt="">
                        <div class="flex-1">
                            <div class="name">{{con.ProductName}}{{con.ProductSubName}}</div>
                            <div class="desc">参与进度 <span class="hilight">{{con.process}}%</span></div>
                            <div class="progress-wrap">
                                <div class="progress" style="width: {{con.process}}%"></div>
                            </div>
                            <div>
                                <div class="flex-wrap">
                                    <a href="listConfirm?type=buy&id={{con.Id}}" class="item-btn flex-1">立即购买</a>
                                    <!--<a href="" class="item-btn flex-1">加入清单</a>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                {% endfor %}
                {% else %}
                <li class="text-center">
                    暂无相关信息
                </li>
                {% endif %}

            </ul>
            {% for cate in cates %}
            {% if loop.last %}

            {% else %}
            <ul class="cate-con-list hide"></ul>
            {% endif %}
            {% endfor%}
        </div>
    </div>
</div>

{% include '../script.html'%}
<script src="iscroll/build/iscroll.js"></script>
<script>
    $(function () {
        var wrap = $('.cate-wrap');
        wrap.css('height', $(document).height());
        var tabScroll = new IScroll('#cate-tabs');
        var contentScroll = new IScroll('#cate-contents');
        $('.cate-tab-list').on('click', '.tab-item', function () {
            var _this = $(this);
            var id = _this.attr('id');
            var index = _this.index();
            var con = $('.cate-con-list').eq(index);
            var page = parseInt(con.attr('page'));
            _this.addClass('curr').siblings().removeClass('curr');
            con.removeClass('hide').siblings().addClass('hide');
            $.ajax({
                url: 'product/getCatePagesByProductId',
                data: {
                    id: id,
                    page: page,
                    pageSize: 20
                },
                type: "post",
                beforeSend: function () {
                    common.loadIndex = layer.load(2);
                }
            }).done(function (data) {
                con.empty();
                var html = '';
                if(data.length > 0){
                    for(var i = 0;i< data.length; i++){
                        var process = ((parseInt(data[i]['JoinPersonTimes']) / parseInt(data[i]['PersonTimes'])) * 100).toFixed(0);
                        html+= '<li><div class="pr flex-wrap link-wrap"><img src="{{uri}}'+data[i].IndexPicture+'" class="show-img" width="75" height="75" alt="">' +
                                '<div class="flex-1"><div class="name">' + data[i].ProductName + data[i].ProductSubName + '</div> ' +
                                '<div class="desc">参与进度 <span class="hilight">'+process+'%</span></div> ' +
                                '<div class="progress-wrap"> <div class="progress" style="width: '+process+'%"></div> </div> ' +
                                '<div> <div class="flex-wrap"> <a href="listConfirm?type=1&id='+data[i].Id+'" class="item-btn flex-1">立即购买</a> ' +
                                '</div> </div> </div> </div></li>';
                    }
                } else {
                    html = "<li class='text-center'>暂无相关信息</li>";
                }
                con.append(html);
            }).fail(function () {
                $.alert('系统错误,请稍后重试');
            }).always(function () {
                layer.close(common.loadIndex);
            });
        });
    });
</script>
</body>

{% endblock%}